<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

        ul li {
            list-style: none;
            display: inline-block;
            text-align: center;
            width: 500px;
            height: 600px;
            padding: 40px 0px;
            position: relative;
        }


        .one-svg {
            display: block;
            margin: 0 auto;
            max-width: 100vw;
            max-height: 100vw;
            animation: rotate 20s infinite linear;
        }

        @keyframes rotate {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }
        .two-svg{
            display: block;
            margin: 0 auto;
            max-width: 100vw;
            max-height: 100vw;
            animation: rotateIn 2s infinite linear;
        }

        @keyframes rotateIn {
            0% {
                -webkit-transform-origin:center center;
                -ms-transform-origin:center center;
                transform-origin:center center;
                -webkit-transform:rotate(-200deg);
                -ms-transform:rotate(-200deg);
                transform:rotate(-200deg);
            }
            50% {
                -webkit-transform-origin:center center;
                -ms-transform-origin:center center;
                transform-origin:center center;
                -webkit-transform:rotate(0);
                -ms-transform:rotate(0);
                transform:rotate(0);
            }
            100% {
                -webkit-transform-origin:center center;
                -ms-transform-origin:center center;
                transform-origin:center center;
                -webkit-transform:rotate(-200deg);
                -ms-transform:rotate(-200deg);
                transform:rotate(-200deg);
            }
        }

        .center-circle2{
            animation: flash 2s infinite linear;
        }
        

        @keyframes flash {
            0%,100%,50% {
                opacity:1
            }
            25%,75% {
                opacity:0
            }
        }
        

    </style>
</head>

<body>

    <ul>
        <li>
            <h3>修改前</h3>

            <svg t="1640534061741" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2104" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M672.974 174.668l-81.928 81.928c-18.9 18.906-18.9 49.564 0 68.476 0 0 84.64 72.435 88.327 76.229 40.859 42.116 47.85 162.096-38.301 253.751-83.549 88.894-211.343 75.404-247.665 36.667-5.241-5.595-65.623-84.027-65.623-84.027-18.917-18.899-49.565-18.899-68.477 0l-81.924 72.245c-18.896 18.918-18.896 49.567 0 68.477 0 0 43.679 54.26 78.506 76.347 108.99 69.111 277.32 80.992 456.48-103.932 186.5-192.487 167.471-343.067 98.428-450.958-6.975-10.902-69.351-95.202-69.351-95.202-20.625-20.949-49.557-18.91-68.472-0.001z" fill="#ccc" p-id="2105"></path><path d="M414.027 893.626h-0.018c-59.677 0-118.495-17.298-170.074-50.01-35.402-22.46-77.077-72.768-83.23-80.317-26.681-27.646-26.382-71.863 0.889-99.144l1.021-0.964 81.455-71.826c13.293-13.02 30.831-20.178 49.477-20.178 18.891 0 36.66 7.356 50.026 20.716l1.899 2.169c28.215 36.646 60.366 78.024 64.368 82.524 10.531 11.237 38.431 22.726 76.699 22.726 52.295-0.008 102.683-21.715 138.261-59.561 81.138-86.318 68.022-192.527 38.546-222.912-4.102-3.86-55.484-48-86.816-74.816l-1.272-1.185c-27.577-27.585-27.577-72.451 0-100.035l81.933-81.937c13.857-13.856 31.732-21.498 50.313-21.498 18.426 0 36.128 7.683 49.856 21.622l2.039 2.383c6.431 8.694 63.033 85.238 70.208 96.444 95.66 149.498 61.607 310.499-101.195 478.535C627.31 840.711 521.529 893.626 414.027 893.626zM192.766 696.157c-9.755 10.2-9.612 26.44 0.413 36.474l1.597 1.771c0.413 0.521 41.815 51.674 73.079 71.496 44.416 28.176 94.964 43.065 146.155 43.065 94.964 0.009 189.953-48.332 282.325-143.671 146.492-151.209 178.678-293.652 95.654-423.39-4.744-7.429-42.516-58.849-67.44-92.534-10.733-10.064-25.408-9.292-35.787 1.086l-81.927 81.928c-9.994 10.003-10.161 26.16-0.505 36.369 38.813 33.232 85.443 73.272 89.055 76.997 48.679 50.157 57.743 182.685-38.049 284.593-43.972 46.793-106.229 73.635-170.796 73.635-46.103 0-88.027-14.165-109.412-36.982-5.316-5.663-47.138-59.829-66.021-84.354-4.813-4.395-11.006-6.792-17.561-6.792-6.969 0-13.513 2.713-18.448 7.633l-1.012 0.959-81.32 71.717z" fill="#ccc" p-id="2106"></path><path d="M323.37 475.762c-12.326 0-22.327-9.992-22.327-22.326 0-87.139 70.769-158.028 157.751-158.028 12.332 0 22.327 9.994 22.327 22.326 0 12.334-9.995 22.328-22.327 22.328-62.359 0-113.09 50.861-113.09 113.374 0 12.334-10.003 22.326-22.334 22.326z" fill="#363634" p-id="2107"></path><path d="M201.872 473.246c-12.326 0-22.328-9.999-22.328-22.333 0-159.186 129.264-288.686 288.149-288.686 12.333 0 22.324 9.992 22.324 22.327 0 12.332-9.991 22.333-22.324 22.333-134.269 0-243.487 109.468-243.487 244.025 0 12.335-10.004 22.334-22.334 22.334z" fill="#363634" p-id="2108"></path></svg>
        </li>
        <li>
            <h3>修改后</h3>
            <svg class="center-circle2" t="1640534061741" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2104" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M672.974 174.668l-81.928 81.928c-18.9 18.906-18.9 49.564 0 68.476 0 0 84.64 72.435 88.327 76.229 40.859 42.116 47.85 162.096-38.301 253.751-83.549 88.894-211.343 75.404-247.665 36.667-5.241-5.595-65.623-84.027-65.623-84.027-18.917-18.899-49.565-18.899-68.477 0l-81.924 72.245c-18.896 18.918-18.896 49.567 0 68.477 0 0 43.679 54.26 78.506 76.347 108.99 69.111 277.32 80.992 456.48-103.932 186.5-192.487 167.471-343.067 98.428-450.958-6.975-10.902-69.351-95.202-69.351-95.202-20.625-20.949-49.557-18.91-68.472-0.001z" fill="#F1CA4E" p-id="2105"></path><path d="M414.027 893.626h-0.018c-59.677 0-118.495-17.298-170.074-50.01-35.402-22.46-77.077-72.768-83.23-80.317-26.681-27.646-26.382-71.863 0.889-99.144l1.021-0.964 81.455-71.826c13.293-13.02 30.831-20.178 49.477-20.178 18.891 0 36.66 7.356 50.026 20.716l1.899 2.169c28.215 36.646 60.366 78.024 64.368 82.524 10.531 11.237 38.431 22.726 76.699 22.726 52.295-0.008 102.683-21.715 138.261-59.561 81.138-86.318 68.022-192.527 38.546-222.912-4.102-3.86-55.484-48-86.816-74.816l-1.272-1.185c-27.577-27.585-27.577-72.451 0-100.035l81.933-81.937c13.857-13.856 31.732-21.498 50.313-21.498 18.426 0 36.128 7.683 49.856 21.622l2.039 2.383c6.431 8.694 63.033 85.238 70.208 96.444 95.66 149.498 61.607 310.499-101.195 478.535C627.31 840.711 521.529 893.626 414.027 893.626zM192.766 696.157c-9.755 10.2-9.612 26.44 0.413 36.474l1.597 1.771c0.413 0.521 41.815 51.674 73.079 71.496 44.416 28.176 94.964 43.065 146.155 43.065 94.964 0.009 189.953-48.332 282.325-143.671 146.492-151.209 178.678-293.652 95.654-423.39-4.744-7.429-42.516-58.849-67.44-92.534-10.733-10.064-25.408-9.292-35.787 1.086l-81.927 81.928c-9.994 10.003-10.161 26.16-0.505 36.369 38.813 33.232 85.443 73.272 89.055 76.997 48.679 50.157 57.743 182.685-38.049 284.593-43.972 46.793-106.229 73.635-170.796 73.635-46.103 0-88.027-14.165-109.412-36.982-5.316-5.663-47.138-59.829-66.021-84.354-4.813-4.395-11.006-6.792-17.561-6.792-6.969 0-13.513 2.713-18.448 7.633l-1.012 0.959-81.32 71.717z" fill="#353533" p-id="2106"></path><path d="M323.37 475.762c-12.326 0-22.327-9.992-22.327-22.326 0-87.139 70.769-158.028 157.751-158.028 12.332 0 22.327 9.994 22.327 22.326 0 12.334-9.995 22.328-22.327 22.328-62.359 0-113.09 50.861-113.09 113.374 0 12.334-10.003 22.326-22.334 22.326z" fill="#363634" p-id="2107"></path><path d="M201.872 473.246c-12.326 0-22.328-9.999-22.328-22.333 0-159.186 129.264-288.686 288.149-288.686 12.333 0 22.324 9.992 22.324 22.327 0 12.332-9.991 22.333-22.324 22.333-134.269 0-243.487 109.468-243.487 244.025 0 12.335-10.004 22.334-22.334 22.334z" fill="#363634" p-id="2108"></path></svg>
        </li>
    </ul>
</body>

</html>